<template>
  <base-breadcrumb :title="$route.meta.title" :breadcrumb="!isAudit">
    <!-- 样板工程实施计划编辑 -->
    <a-form-model ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" id="base-breadcrumb" style="position: relative">
      <a-spin :spinning="loading[0] || loading[1]">
        <!-- 项目信息 -->
        <!--        @projectchange="handleChange"-->
        <base-info ref="baseInfo" :disabled="form.mapItems.length > 1 || editModel == '0'" :form="form" :editModel="editModel" :isNeedAuth="true" @companychange="companychange" />
        <!-- 表格 -->
        <a-card :bordered="false" style="margin-bottom: 80px">
          <a-button type="primary" @click="exportAllFn">全部导出</a-button>
          <div v-if="Object.keys(form.mapItems).length > 0">
            <div v-for="(item, index) in form.mapItems" :key="index" style="margin-top:20px;">
              <title-name :title="index"></title-name>
              <a-table rowKey="id" bordered :scroll="{ x: 1600 }" :pagination="false" :columns="columns" :dataSource="item">
                <template slot="implPoints" slot-scope="text, record">
                  <ellipsis :length="50" tooltip>
                    {{ text }}
                  </ellipsis>
                </template>
                <template v-if="record.acceptanceId" slot="actions" slot-scope="text, record">
                  <a @click="handleCheck(record)">查看</a>
                </template>
              </a-table>
            </div>
          </div>
        </a-card>
      </a-spin>
      <!-- 页脚操作栏 -->
      <div class="btn_box page-btn-right-top">
        <a-button type="primary" @click="handleActiveClose">关闭</a-button>
      </div>
    </a-form-model>
  </base-breadcrumb>
</template>

<script>
import { projectImplementationPlan } from '@/api/quality/sample' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import BaseInfo from '@/components/businessComponents/BaseInfo' // 基础信息
import SelectSubcontractor from '@/components/Select/SelectSubcontractor' // 分包商
import SelectTeam from '@/components/Select/SelectTeam' // 班组
import { Ellipsis } from '@/components'
// import { STable } from '@/components' // 表格

export default {
  name: 'a' + Date.now(),
  // extends: new BaseEditPage(),
  components: {
    BaseInfo,
    // STable,
    SelectSubcontractor,
    SelectTeam,
    Ellipsis
  },
  props: {
    // 是否作为审批详情
    isAudit: {
      type: Boolean,
      default: false
    },
    // 是否作为意见征询
    isConsultation: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: { 0: false, 1: false },
      editModel: 0,
      id: '',
      form: {
        mapItems: []
      }, // 表单
      mapItems: {},
      //点击提交发送流程配置值
      setProcessConfig: null,
      businessId: null
    }
  },
  computed: {
    // 表头
    columns() {
      let columns = [
        {
          title: '序号',
          width: 80,
          dataIndex: 'number',
          customRender() {
            return arguments[2] + 1
          }
        },
        {
          title: '样板部位',
          dataIndex: 'part',
          width: 160
        },
        {
          title: '样板名称',
          dataIndex: 'name',
          width: 160
        },
        {
          title: '劳务单位',
          dataIndex: this.editModel == 0 ? 'subcontractor' : 'subcontractorId',
          width: 160
        },
        {
          title: '班组',
          dataIndex: this.editModel == 0 ? 'monitor' : 'monitorId',
          width: 160
        },
        {
          title: '计划制作时间',
          dataIndex: 'makeDate',
          width: 160
        },
        {
          title: '实施要点',
          dataIndex: 'implPoints',
          scopedSlots: { customRender: 'implPoints' },
          width: 280
        },
        {
          title: '实际实施时间',
          dataIndex: 'constructionDate'
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: 120,
          fixed: 'right',
          align: 'center',
          scopedSlots: { customRender: 'actions' }
        }
      ] // 表头
      return columns
    }
  },
  async created() {
    this.$route.meta.title = '样板工程实施计划查看'
    // 不为添加时请求详情
    if (this.editModel != 2) {
      this.loading[0] = true
      let args = {}
      if (this.businessId) {
        args.businessId = this.businessId
      } else {
        args.id = this.$route.query.id
      }
      args.isView = 1
      this.historyId && (args.historyId = this.historyId)
      projectImplementationPlan
        .getDetail(args)
        .then(res => {
          this.loading[0] = false
          if (res.code === 200) {
            this.form = res.data
          }
        })
        .catch(res => {
          this.loading[0] = false
        })
    }
  },
  methods: {
    /**
     * 查看
     */
     handleCheck (data) {
      this.$router.push({
        name: '/quality/modelProject/acceptanceRecord/acceptanceRecordEdit',
        query:{
          editModel: 0,
          id:data.acceptanceId
        }
      })
    },
    /**
     * 关闭
     */
    handleActiveClose() {
      this.$multiTab.close(this.$route.fullpath)
    },
    /**
     * 导出全部
     */
    async exportAllFn() {
      let res = await projectImplementationPlan.expAll(this.$route.query.id)
      console.log('resres', res)
      this.handleDownload(res)
    },
    /**
     * 转义下载
     * @param parameter
     */
    handleDownload(res) {
      const blob = new Blob([res.data])
      let filename = decodeURIComponent(res.headers['content-disposition'].split('filename=')[1])
      filename = filename.replace(/"/g, "");// 去掉首位" 要不文件会被换成 _ 
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href
      downloadElement.download = filename
      document.body.appendChild(downloadElement)
      downloadElement.click() //点击下载
      document.body.removeChild(downloadElement) //下载完成移除元素
      window.URL.revokeObjectURL(href) //释放blob对象
    },
    companychange(branchCompanyId) {
      this.form.branchCompanyId = branchCompanyId
    }
  }
}
</script>
